<template>
  <div class="app-container">
    <div class="atlas-body">
      <div class="atlas-title">
        <el-row :gutter="20">
          <el-col :span="16" style="font-size: 18px">产业图谱</el-col>
          <el-col :span="2">
            <el-select
                v-model="selectValue"
                size="large"
                @change="setSelectValue"
            >
              <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item"
                  :value="index"
              />
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button :type="chooseVal===1?'primary':'success'" :plain="!chooseVal" size="large"
                       @click="setChooseList">强链环节：4个
            </el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" plain size="large">补链环节：5个</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" plain size="large">延链环节：1个</el-button>
          </el-col>
        </el-row>
      </div>
      <ul class="atlas-list">
        <li v-for="(item,index) in tableData " :style="{backgroundColor:colors[index]}">
          <div class="atlas-li-title"> {{ item.chainName }}({{ item.fenghuaCount }}/{{ item.nationCount }})</div>
          <ul class="atlas-li-list">
            <li v-for="val in item.childChains">
              <div class="atlas-li-box" :style="{backgroundColor:val.bgcolor,color:val.bgcolor ==='#67c23a'?'#ffffff':'#333333'}">
                {{ val.chainName }}({{ val.fenghuaCount }}/{{ val.nationCount }})
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>


<script setup>
import {reactive, ref} from "vue";
import getChainSummary from '../data/getChainSummary.json'

const selectValue = ref(1)
const options = reactive([
  '生命(医疗)健康业',
  '关键基础件(气动)产业'
])

const chooseList = ref([
  '7802010000',
  '7802020000',
  '7802030000',
  '7802040000'
])

const chooseVal = ref(1)

const setChooseList = () => {
  chooseVal.value = chooseVal.value === 2?1:2
  tableData.value.forEach(item => {
    item.childChains.forEach(item2 => {
      if (chooseList.value.includes(item2.chainId)) {
        if(chooseVal.value === 2){
          item2.bgcolor = '#67c23a'
        }else{
          item2.bgcolor = '#d5e3ff'
        }
      }
    })
  })
}

const colors = reactive([
  '#f0f4fc',
  '#ebf7f1',
  '#faf5f0',
  '#f0f4fc',
  '#ebf7f1',
  '#faf5f0',
])

const hainSummaryData = reactive(getChainSummary)
const tableData = ref(hainSummaryData[selectValue.value].childChains)

const setSelectValue = (e) => {
  selectValue.value = e
  console.log(e)
  tableData.value = hainSummaryData[e].childChains
}


</script>

<style scoped lang="scss">

.atlas-body {
  background-color: #ffffff;

  .atlas-title {
    padding: 20px;
  }
}

.atlas-list {
  padding: 20px;
  display: flex;

  > li {
    width: calc(100% / 6 - 20px);
    background-color: #f0f4fc;
    margin-right: 20px;

    &:last-child {
      margin-right: 0;
    }

    .atlas-li-title {
      margin-top: 20px;
      margin-bottom: 20px;
      height: 50px;
      line-height: 50px;
      color: #ffffff;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      background-image: url('@/assets/images/bgatlas.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }

    .atlas-li-list {
      padding: 0 20px;

      > li {
        padding: 15px;
        margin-bottom: 10px;
        background-color: #ffffff;

        > .atlas-li-box {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          border-radius: 5px;
          text-align: center;
          background-color: #d5e3ff;
        }
      }


    }
  }
}
</style>
